<template>
  <div id="property">
    <div class="property-inner">
      <md-scroll-view :scrolling-x="false" ref="scrollView" :autoReflow="true">
        <h2 class="name">房产权利人：{{propetyInfo.name}}</h2>
        <h3 class="area">小区：{{propetyInfo.xq_name}}</h3>
        <h3 class="num">专有面积合计：{{propetyInfo.num}}㎡</h3>

        <!-- 已经添加的产权证列表 -->
        <div class="property-list">
          <div class="property-item" v-for="(item,index) in propetyInfo.list" :key="index">
            <md-bill>
              <div class="header-slot" slot="header">
                <h1 class="title">{{item.address}}</h1>
              </div>
              <md-detail-item title="类型">{{item.htype}}</md-detail-item>
              <md-detail-item title="面积">{{item.area}}㎡</md-detail-item>
            </md-bill>
          </div>
        </div>
        <div class="exit-btn" @click="outQuarter">我要退出该小区业主身份</div>
      </md-scroll-view>
    </div>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import {
  Toast,
  Dialog,
  ScrollView,
  NoticeBar,
  Icon,
  ImageReader,
  Tag,
  Agree,
  Button,
  Bill,
  DetailItem,
  Radio,
  RadioList
} from "mand-mobile";

export default {
  components: {
    [Dialog.name]: Dialog,
    [ScrollView.name]: ScrollView,
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag,
    [Agree.name]: Agree,
    [Button.name]: Button,
    [Bill.name]: Bill,
    [DetailItem.name]: DetailItem,
    [Radio.name]: Radio,
    [RadioList.name]: RadioList
  },
  name: "property",
  data() {
    return {
      propetyInfo: {}
    };
  },
  methods: {
    // 获取产权信息
    getChanQuanInfo() {
      let params = {
        uid: this.$store.state.userInfo.id,
        qid: this.$store.state.residentialType.qid
      };
      https
        .fetchPost(config.getChanQuanInfo, params)
        .then(res => {
          if (res.data.code == 1) {
            let propetyInfo = res.data.data;
            this.propetyInfo = propetyInfo;
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 保存信息
    outQuarter() {
      let _this = this;
      Dialog.confirm({
        title: "提示",
        content: "确认退出该小区身份？",
        confirmText: "确定",
        onConfirm: () => {
          let params = {
            uid: _this.$store.state.userInfo.id,
            qid: _this.$store.state.residentialType.qid
          };
          https
            .fetchPost(config.outQuarter, params)
            .then(res => {
              if (res.data.code == 1) {
                Toast.succeed(res.data.msg, 2000);
                _this.getChanQuanInfo();
              } else {
                Toast.failed(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    }
  },
  created() {
    this.getChanQuanInfo();
  },
  mounted() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-tab-bar-item {
  &.is-active {
    color: $themeColor !important;
  }
}
.md-notice-bar {
  z-index: 1;
}
button {
  z-index: 1;
}
.property-list {
  border-top: 20px solid #f2f2f2;
  padding-top: 20px;
}
.property-inner {
  padding: 0 0 60px;
}
.name {
  display: flex;
  align-items: center;
  padding: 0 40px;
  font-size: 30px;
  color: #444;
  padding-top: 40px;
  margin-bottom: 20px;
  &::before {
    content: "";
    display: block;
    height: 38px;
    border-left: 6px solid $themeGold;
    margin-right: 28px;
  }
}
.area {
  display: flex;
  align-items: center;
  padding: 0 40px;
  font-size: 30px;
  color: #444;
  margin-bottom: 20px;
  &::before {
    content: "";
    display: block;
    height: 38px;
    border-left: 6px solid $themeGold;
    margin-right: 28px;
  }
}
.num {
  display: flex;
  align-items: center;
  padding: 0 40px;
  font-size: 30px;
  color: #444;
  margin-bottom: 30px;
  &::before {
    content: "";
    display: block;
    height: 38px;
    border-left: 6px solid $themeGold;
    margin-right: 28px;
  }
}
.property-item {
  position: relative;
  padding: 20px 30px;
  .md-bill {
    background-color: #fff;
    box-shadow: 0 6px 24px #ccc;
    .md-detail-item {
      padding: 5px;
    }
    .md-bill-neck {
      position: relative;
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 0;
        width: 36px;
        height: 36px;
        border-radius: 18px;
        background-color: red;
      }
      &::before {
        left: 0px;
      }
      &::after {
        right: 0px;
      }
    }
    .header-slot {
      position: relative;
      width: 100%;
      .del-btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $themeGold;
      }
      .title {
        // color: $themeGold;
        color: #333;
        font-size: 26px;
        line-height: 1.2;
        width: 90%;
        strong {
          font-size: 50px;
        }
      }
      .desc {
        margin-top: 16px;
        color: #858b9c;
        font-size: 26px;
        line-height: 40px;
      }
    }
  }
}
.exit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 60px;
  border-radius: 50px;
  font-size: 28px;
  margin: 60px auto 0;
  color: #fff;
  background: #2f86f6;
}
</style>
